<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
    <link rel="stylesheet" href="../static/layui/css/layui.css"/>
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/layui/layui.js"></script>
    <style>
        /*表格*/
        .table {
            width: 1200px;
            margin: 0 auto;
            padding-top: 40px;
        }

        .table tr {
            height: 40px;
            align-items: center;
            font-size: 14px;
            font-family: Microsoft YaHei;
            line-height: 40px;
        }

        .table tr td {
            padding: 0 !important;
        }

        .layui-table-tool {
            background-color: white;
            font-size: 16px;
            font-family: Microsoft YaHei;
        }

        .table tr:nth-child(even) {
            background: #FAFAFA;
        }

        .layui-laypage-curr em {
            background-color: #CDE1FF !important;
            color: #2671EE !important;
        }

        /*用户信息表单*/
        #userInfo {
            width: 90%;
            margin: 0 auto;
            margin-top: 40px;
        }

        #userInfo .layui-form-item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        #userInfo .layui-form-label {
            display: inline-block;
            padding-left: 0;
            padding-right: 0;
            text-align: left;
            width: 20%;
        }

        #userInfo .layui-input-block {
            display: inline-block;
            margin-left: 0;
            width: 75%;
        }

        #userInfo .btn {
            width: 100%;
        }

        #userInfo .btn .layui-input-block {
            width: 100%;
            margin: 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        #userInfo .btn .layui-input-block .layui-btn {
            background-color: #1E9FFF;
        }

        {#下拉列表#}
        dd.layui-this {
            background-color: #1E9FFF !important;

        }

        {#头部工具#}
        .layui-table-tool {
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        .layui-table-tool .layui-table-tool-temp {
            width: 100%;
            padding-right: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        {#行内工具#}
        #operateBtn {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            width: 90%;
            margin: 0 auto;
            height: 100%;
        }

        #operateBtn a:hover {
            color: #2671EE;
        }

        #operateBtn div {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        #operateBtn div img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

        #operateBtn div li {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            color: #2671EE;
        }

        .layui-icon-set-sm:before {
            content: "\e620";
            text-align: center;
            position: absolute;
            display: block;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        #operateBtn div .text {
            font-size: 14px;
            font-weight: 400;
            color: #009688;
            background: none;
            padding-right: 0;
        !important;
            padding-left: 0;
        !important;
        }

        {#赋权表单#}
        #userCount {
            display: flex;
            width: 220px;
            height: 150px;
            flex-direction: column;
            justify-content: space-around;
            align-content: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); /*自己的50% */

        }

        #userCount div {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-content: center;
        }

        #userCount div:nth-child(2) {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-content: center;
        }

        #userCount .userCountValue {
            height: 36px;
            width: 80px;
            font-size: 16px;
            line-height: 36px;
            font-family: Microsoft YaHei;
            color: #666;
            text-align: center;
        }

        #userCount .userCountBtn {
            height: 40px;
            width: 50px;
            border-color: #1E9FFF;
            background-color: #1E9FFF;
            font-size: 25px;
            line-height: 40px;
            font-family: Microsoft YaHei;
            color: #FFFFFF;
            padding: 0;
        }

        #userCount #ok {
            font-size: 14px;
            border-radius: 2px;
            border-color: #1E9FFF;
            background-color: #1E9FFF
        }

        #userCount #cancel {
            font-size: 14px;
            border-radius: 2px;
            border-color: #1E9FFF;
            background-color: #1E9FFF
        }

        #title {
            margin-top: -35px;
        }

        {#删除用户#}
        .layui-layer-btn {
            text-align: center !important;
        }
    </style>

</head>
<body>
    <div class="children-body">

        <div class="table">
            <table id="userTable" lay-size="sm" lay-filter="userTable"></table>
        </div>
    </div>
    <script>
        {#var csrftoken = "{{csrf_token()}}"#}
        layui.use(['element', 'table', 'layer', 'form'], function () {
            let element = layui.element;
            let table = layui.table;
            let form = layui.form;
            let userInfoLayer = null;
            //渲染表格
            let userTable = table.render(
                {
                    elem: "#userTable",
                    page: true,
                    limit: 10,
                    limits: [10],
                    url: '/get_data',
                    {#headers: {"X-CSRFToken": csrftoken},#}
                    method: 'GET',
                    where: {'position': 1},
                    cols: [[
                        {field: 'id', title: '排名', align: 'center', width: '10%', fixed: 'left'},
                        {field: 'name', title: '电影名称', align: 'center', width: '15%', fixed: 'left'},
                        {field: 'pf', title: '当前票房', align: 'center', width: '10%', fixed: 'left'},
                        {field: 'sj', title: '上映时间', align: 'center', width: '15%', fixed: 'left'},
                        {field: 'pfzb', title: '票房占比', align: 'center', width: '10%', fixed: 'left'},
                        {field: 'ljsyts', title: '累计上映天数', align: 'center', width: '10%', fixed: 'left'},
                        {field: 'tpp', title: '淘票票想看数', align: 'center', width: '10%', fixed: 'left'},
                        {field: 'my', title: '猫眼想看数', align: 'center', width: '10%', fixed: 'left'},
                        {field: 'db', title: '豆瓣想看数', align: 'center', width: '10%', fixed: 'left'},

                    ]],
                    toolbar: '#toolbar',
                    defaultToolbar: [],
                    //表格渲染完执行
                    done: function (res, curr, count) {
                        $("[data-field='password']").css('display', 'none'); //隐藏密码
                        $("[data-field='count']").css('display', 'none'); //隐藏密码
                        //回车搜索
                        $('#keyword').bind('keyup', function (event) {
                            if (event.keyCode == '13') {
                                searchUser()
                            }
                        })
                    }
                },
            )
            // 监听行操作
            table.on('tool(userTable)', function (obj) {
                let user = obj.data

            })
            //监听头部工具--新增用户
            table.on('toolbar(userTable)', function (obj) {
                //新增
                if (obj.event == 'add') {
                    addUser()
                }
                //搜索
                else if (obj.event == 'search') {
                    searchUser();
                }
            })

            //表单验证
            form.verify({
                username: [/^[\S]{2,12}$/, '用户名长度必须3到12位，且不能出现空格'],
                phone: function (value, item) {
                    if (value.trim().length > 0) {
                        var rule = /^1\d{10}$/;
                        if (!rule.test(value)) {
                            return '手机号码必须11位数字！'
                        }
                    }
                }
            })

            //搜索
            function searchUser() {
                let keyword = $('#keyword').val().trim()
                userTable.reload({
                    method: 'GET',
                    where: {
                        'name': keyword,
                        'position': 1
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })
                $('#keyword').val(keyword)
            }

            //新增
            function addUser() {
                var loading = layer.msg("正在为您更新数据中，请稍后...", {icon: 16, shade: [0.3, "gray"], time: false});

                    $.ajax({
                        url: '/update_data',
                        method: 'post',
                        data: obj.field,
                        dataType: 'JSON',
                        success: function (res) {
                            $('#userInfo').css('display', 'none')
                            layer.close(loading)
                            layer.msg('数据更新成功！');
                        },
                        error: function (res) {
                            layer.msg('数据更新失败！');
                        }
                    });

            }
        });
    </script>

    <script type="text/html" id="toolbar">
        <div id="addUser">
            <a class="layui-btn layui-btn-sm" lay-event="add">
                <span style="padding-left: 5px">更新数据</span>
            </a>
        </div>
    </script>
</body>
</html>
